<template>
  <div>
    <head1></head1>
    <div>
        <van-row>
            <van-col span='4'>类别:</van-col>
            <van-col span='15'>
                <van-button v-for="i,tindex in ctypelist" :key="tindex" @click="addType(i.id)">{{i.name}}</van-button>
            </van-col>
        </van-row>

        <van-row>
            <van-col span='4'>标签:</van-col>
            <van-col span='19'>
                <van-button @click="addgethome">全部</van-button>
                <van-button v-for="i,tindex in tagslist" :key="tindex" @click="addTag(i.id)">{{i.name}}</van-button>
            </van-col>
        </van-row>

        <div v-for="(i,ind) in clist" :key="ind">
        <van-card
            num="2"
            :desc="i.descrip"
            :title="i.name"
            :thumb="i.url"
            :key="index"
        />
        <van-button size="mini" @click="tiao(i.id)">详情</van-button>
        </div>
        <van-pagination v-model="currentPage" :total-items="total" :items-per-page="page_size" @change="getCourse"/>

    </div>
    <footer1></footer1>
  </div>
</template>

<script>
import head1 from '../components/head1.vue'
import footer1 from '../components/footer1.vue'
export default {
    components:{
        "head1":head1,
        "footer1":footer1
    },
    data(){
        return{
            currentPage:1,
            tagslist:[],
            ctypelist:[],
            total:0,
            page_size:2,
            typeid:0,
            tagid:0,
            clist:[],
            tlist:[],
            taglist:[],
        }
    },
    methods:{
        tiao(id){
            this.$router.push({path:"/detail",query:{"id":id}})
        },
        addgethome(){
            this.typeid = 0,
            this.tagid = 0,
            this.getCourse(1)
        },
        addTag(id){
            this.tagid = id
            this.getCourse(1)
        },
        addType(id){
            this.typeid = id
            this.getCourse(1)
        },
        getCourse(page){
            this.axios.get("getHomeCourse?page="+page+"&type="+this.typeid+"&tagid="+this.tagid).then(res=>{
                this.clist = res.data.clist
                this.total = res.data.total
                this.page_size = res.data.page_size
                this.tagslist = res.data.taglist
                this.ctypelist = res.data.tlist
            })
        }
    },
    mounted(){
        this.getCourse(1)
    }
}
</script>

<style>

</style>